
<template>
    <!-- TOP渠道 -->
    <div class="channel">
   <div class="head">
   <el-row>
     <el-col :span="4"><h3>TOP渠道</h3>
    </el-col>
    <el-col :span="10" :offset="9">
         <el-tabs v-model="activeName" type="card" @tab-click="handleClick" :stretch="true">
          <el-tab-pane label="新增用户" name="first"></el-tab-pane>
          <el-tab-pane label="活跃用户" name="second"></el-tab-pane>
          <el-tab-pane label="累计用户" name="third"></el-tab-pane>
        </el-tabs>
    </el-col>
   </el-row>
   
   </div>
   <div class="content">
    <Echarts :echartsData="echartsData" :isAxisChart="false" :idName="'channel'"></Echarts>
   </div>
  </div>
</template>

<script>
import Echarts from '../../components/echarts.vue'

export default {
  components: { Echarts },
data(){
    return {
        activeName:'first',
        echartsData:{
          legendShow:true,
          series: [

{
  hoverAnimation: false, 
  type: 'pie',
  radius: ['40%', '70%'],
  labelLine: {
    show: true,
    length:50,
  },
  label:{
    formatter: function (params) {
    return params.name + ': '   + params.percent.toFixed(2) + '%' // 自定义标签线内容
  }
  },
  data: [
    { value: 1048, name: '小米应用商店' },
    { value: 735, name: '应用宝' },
    { value: 580, name: '豌豆英' },
    { value: 580, name: '安智' },
    { value: 580, name: '应用市场' }
  ]
}
]
        }
    }
},
methods:{
    handleClick(){

    }
}
}
</script>

<style scoped>
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
 border-bottom: 1px solid transparent;
}

</style>